<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="商户" prop="accountId">
        <el-select
          v-model="queryParams.accountId"
          placeholder="请选择商户"
          @keyup.enter.native="handleQuery"
        >
          <el-option
            v-for="mer in merchantList"
            :key="mer.accountId"
            :label="mer.shopName"
            :value="mer.accountId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="别名" prop="defindName">
        <el-input
          v-model="queryParams.defindName"
          placeholder="请输入别名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="站点" prop="country">
        <el-input
          v-model="queryParams.country"
          placeholder="请输入站点"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="店铺名称" prop="shopName">
        <el-input
          v-model="queryParams.shopName"
          placeholder="请输入店铺名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="goAuthUrl"
          >新增授权</el-button
        >
      </el-col>

      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="shopList">
      <el-table-column label="id" align="center" prop="id" v-if="false" />
      <!-- <el-table-column label="账户ID" align="center" prop="accountId" /> -->
      <el-table-column label="平台" align="center" prop="accountType" />
      <!-- <el-table-column label="别名" align="center" prop="defindName" /> -->
      <el-table-column
        label="店铺名称"
        align="center"
        width="240"
        prop="shopName"
      />
      <el-table-column label="用于发布" align="center" prop="isPublish">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isPublish"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="updateIsPublish(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="站点" align="center" prop="country">
        <template slot-scope="scope">
          {{ scope.row.country }}
          <el-tag v-if="scope.row.isSip" size="mini">SIP</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        label="店铺类型"
        align="center"
        prop="shopType"
        :formatter="shopTypeFormat"
      />

      <el-table-column label="店铺id" align="center" prop="shopId" />
      <el-table-column
        label="授权开始时间"
        align="center"
        prop="sqCreateTime"
        width="180"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.sqCreateTime, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <el-table-column label="授权年限" align="center" prop="sqTime" />
      <!-- <el-table-column label="状态" align="center" prop="status" /> -->
      <el-table-column label="备注" align="center" prop="remark" />
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {
  getAuthUrl,
  listShop,
  updateShop,
} from "@/api/woocom/auth";

export default {
  name: "Shop",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 授权店铺表格数据
      shopList: [],
      //全球商户列表
      merchantList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        accountId: null,
        accountType: null,
        defindName: null,
        isSip: null,
        country: null,
        shopType: null,
        shopId: null,
        shopName: null,
        sqCreateTime: null,
        sqTime: null,
        lastRefreshToken: null,
        sort: null,
        status: null,
        delFlat: null,
      },
    };
  },

  created() {
    //this.getList();
    //this.getMerchantList();
  },
  methods: {
    goAuthUrl() {
      getAuthUrl().then((response) => {
        this.goTarget(response.msg);
      });
    },

     goTarget(url) {
      window.open(url, "_blank");
    },

    getMerchantList() {
      listMerchant().then((response) => {
        //console.log(response);
        this.merchantList = response.data;
        //默认选中第一个
        //this.queryParams.accountId = response.data[0].accountId;
      });
    },
   
    /** 查询授权店铺列表 */
    getList() {
      this.loading = true;
      listShop(this.queryParams).then((response) => {
        this.shopList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 修改操作 */
    updateIsPublish(data) {
      //console.log("最新信息", data);
      let { id, isPublish } = data;
      updateShop({ id, isPublish }).then((response) => {
        this.$message({
          type: "success",
          message: "状态更新成功",
        });
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
  },
};
</script>
